<template>
  <div class="permission-demo">
    <el-card class="mb-6">
      <template #header>
        <div class="flex items-center justify-between">
          <span class="text-xl font-semibold">权限控制演示</span>
          <el-button @click="refreshPermissions" type="primary">刷新权限</el-button>
        </div>
      </template>

      <div class="space-y-6">
        <!-- 当前权限信息 -->
        <el-alert title="当前用户权限信息" type="info" :closable="false">
          <div class="mt-2">
            <p>
              <strong>用户权限数量：</strong>
              {{ userPermissions.length }}
            </p>
            <p>
              <strong>是否为超级管理员：</strong>
              <el-tag :type="isSuperAdmin ? 'danger' : 'info'">{{ isSuperAdmin ? '是' : '否' }}</el-tag>
            </p>
            <p>
              <strong>权限列表：</strong>
            </p>
            <div class="flex flex-wrap gap-2 mt-2">
              <el-tag
                v-for="permission in userPermissions"
                :key="permission"
                size="small"
                class="mb-1"
              >{{ permission }}</el-tag>
            </div>
          </div>
        </el-alert>

        <!-- 超级管理员权限演示 -->
        <el-divider content-position="left">超级管理员权限演示</el-divider>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">超级管理员权限控制</h4>
          <el-alert
            :title="isSuperAdmin ? '当前用户为超级管理员，拥有所有权限' : '当前用户不是超级管理员，按权限控制显示'"
            :type="isSuperAdmin ? 'success' : 'warning'"
            :closable="false"
            class="mb-3"
          >
            <div v-if="isSuperAdmin">超级管理员（code = super_admin）自动拥有所有权限，无需单独配置。</div>
            <div v-else>普通用户需要配置具体权限才能看到相应按钮。</div>
          </el-alert>

          <div class="flex flex-wrap gap-3">
            <el-button v-permission="'user:add'" type="primary">
              <el-icon>
                <Plus />
              </el-icon>新增用户
            </el-button>
            <el-button v-permission="'user:edit'" type="warning">
              <el-icon>
                <Edit />
              </el-icon>编辑用户
            </el-button>
            <el-button v-permission="'user:delete'" type="danger">
              <el-icon>
                <Delete />
              </el-icon>删除用户
            </el-button>
            <el-button v-permission="'admin:access'" type="danger">
              <el-icon>
                <Lock />
              </el-icon>管理员功能
            </el-button>
            <el-button v-permission="'system:config'" type="info">
              <el-icon>
                <Setting />
              </el-icon>系统配置
            </el-button>
          </div>
          <p class="text-sm text-gray-600 mt-2">提示：超级管理员可以看到所有按钮，普通用户只能看到有权限的按钮</p>
        </div>

        <!-- v-permission 指令演示 -->
        <el-divider content-position="left">v-permission 指令演示</el-divider>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">隐藏模式（默认）</h4>
          <div class="flex flex-wrap gap-3">
            <el-button v-permission="'user:add'" type="primary">
              <el-icon>
                <Plus />
              </el-icon>新增用户
            </el-button>
            <el-button v-permission="'user:edit'" type="warning">
              <el-icon>
                <Edit />
              </el-icon>编辑用户
            </el-button>
            <el-button v-permission="'user:delete'" type="danger">
              <el-icon>
                <Delete />
              </el-icon>删除用户
            </el-button>
            <el-button v-permission="'admin:access'" type="danger">
              <el-icon>
                <Lock />
              </el-icon>管理员功能
            </el-button>
          </div>
          <p class="text-sm text-gray-600 mt-2">提示：没有对应权限的按钮会被隐藏</p>
        </div>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">禁用模式</h4>
          <div class="flex flex-wrap gap-3">
            <el-button v-permission.disabled="'user:add'" type="primary">
              <el-icon>
                <Plus />
              </el-icon>新增用户
            </el-button>
            <el-button v-permission.disabled="'user:edit'" type="warning">
              <el-icon>
                <Edit />
              </el-icon>编辑用户
            </el-button>
            <el-button v-permission.disabled="'user:delete'" type="danger">
              <el-icon>
                <Delete />
              </el-icon>删除用户
            </el-button>
            <el-button v-permission.disabled="'admin:access'" type="danger">
              <el-icon>
                <Lock />
              </el-icon>管理员功能
            </el-button>
          </div>
          <p class="text-sm text-gray-600 mt-2">提示：没有对应权限的按钮会被禁用并阻止点击</p>
        </div>

        <!-- Permission 组件演示 -->
        <el-divider content-position="left">Permission 组件演示</el-divider>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">单个权限控制</h4>
          <div class="flex flex-wrap gap-3">
            <Permission permission="user:add">
              <el-button type="primary">
                <el-icon>
                  <Plus />
                </el-icon>新增用户
              </el-button>
            </Permission>

            <Permission permission="user:edit">
              <el-button type="warning">
                <el-icon>
                  <Edit />
                </el-icon>编辑用户
              </el-button>
            </Permission>

            <Permission permission="user:delete">
              <el-button type="danger">
                <el-icon>
                  <Delete />
                </el-icon>删除用户
              </el-button>
            </Permission>
          </div>
        </div>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">多权限控制（任一满足）</h4>
          <Permission :permission="['user:add', 'user:edit']" mode="any">
            <el-alert
              title="用户管理权限"
              type="success"
              :closable="false"
              class="mb-3"
            >您具有用户管理相关权限，可以进行用户操作。</el-alert>
            <div class="flex flex-wrap gap-3">
              <el-button type="primary">用户操作</el-button>
              <el-button type="warning">用户管理</el-button>
            </div>
          </Permission>
        </div>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">多权限控制（全部满足）</h4>
          <Permission :permission="['user:edit', 'user:delete']" mode="all">
            <el-alert
              title="高级用户管理权限"
              type="warning"
              :closable="false"
              class="mb-3"
            >您具有完整的用户管理权限，可以进行所有用户操作。</el-alert>
            <div class="flex flex-wrap gap-3">
              <el-button type="danger">高级操作</el-button>
              <el-button type="warning">批量操作</el-button>
            </div>
          </Permission>
        </div>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">无权限时显示替代内容</h4>
          <Permission permission="admin:access">
            <el-alert title="管理员功能区域" type="danger" :closable="false" class="mb-3">这是管理员专用功能区域。</el-alert>
            <el-button type="danger">管理员操作</el-button>
            <template #no-permission>
              <el-alert title="权限不足" type="info" :closable="false" class="mb-3">您没有管理员权限，无法访问此功能。</el-alert>
              <el-button disabled>权限不足</el-button>
            </template>
          </Permission>
        </div>

        <!-- 权限检查演示 -->
        <el-divider content-position="left">权限检查演示</el-divider>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">JavaScript 权限检查</h4>
          <div class="space-y-3">
            <div class="flex items-center gap-3">
              <span>检查 user:add 权限：</span>
              <el-tag
                :type="checkPermission('user:add') ? 'success' : 'danger'"
              >{{ checkPermission('user:add') ? '有权限' : '无权限' }}</el-tag>
              <el-tag v-if="isSuperAdmin" type="danger" size="small">超级管理员</el-tag>
            </div>
            <div class="flex items-center gap-3">
              <span>检查 user:edit 权限：</span>
              <el-tag
                :type="checkPermission('user:edit') ? 'success' : 'danger'"
              >{{ checkPermission('user:edit') ? '有权限' : '无权限' }}</el-tag>
              <el-tag v-if="isSuperAdmin" type="danger" size="small">超级管理员</el-tag>
            </div>
            <div class="flex items-center gap-3">
              <span>检查多权限（任一）：</span>
              <el-tag
                :type="checkPermission(['user:add', 'user:edit']) ? 'success' : 'danger'"
              >{{ checkPermission(['user:add', 'user:edit']) ? '有权限' : '无权限' }}</el-tag>
              <el-tag v-if="isSuperAdmin" type="danger" size="small">超级管理员</el-tag>
            </div>
            <div class="flex items-center gap-3">
              <span>检查不存在的权限：</span>
              <el-tag
                :type="checkPermission('non:existent:permission') ? 'success' : 'danger'"
              >{{ checkPermission('non:existent:permission') ? '有权限' : '无权限' }}</el-tag>
              <el-tag v-if="isSuperAdmin" type="danger" size="small">超级管理员</el-tag>
            </div>
          </div>
        </div>

        <!-- 超级管理员模拟 -->
        <el-divider content-position="left">超级管理员模拟</el-divider>

        <div class="demo-section">
          <h4 class="text-lg font-medium mb-3">模拟超级管理员权限</h4>
          <el-alert
            title="注意：此功能仅用于演示，实际权限由后端用户角色决定"
            type="info"
            :closable="false"
            class="mb-3"
          >超级管理员角色 code = super_admin，当用户拥有此角色时自动获得所有权限。</el-alert>

          <div class="flex flex-wrap gap-3">
            <Permission permission="user:add">
              <el-button type="primary">用户添加权限</el-button>
              <template #no-permission>
                <el-button disabled>无用户添加权限</el-button>
              </template>
            </Permission>

            <Permission permission="admin:access">
              <el-button type="danger">管理员权限</el-button>
              <template #no-permission>
                <el-button disabled>无管理员权限</el-button>
              </template>
            </Permission>

            <Permission :permission="['system:config', 'admin:access']" mode="all">
              <el-button type="warning">系统管理权限</el-button>
              <template #no-permission>
                <el-button disabled>无系统管理权限</el-button>
              </template>
            </Permission>
          </div>

          <div class="mt-4 p-3 bg-gray-50 rounded">
            <p class="text-sm text-gray-600 mb-2">
              <strong>超级管理员权限规则：</strong>
            </p>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 当用户角色 code = 'super_admin' 时，自动拥有所有权限</li>
              <li>• 支持多种角色数据结构：roles数组、roles对象、roleCode字段</li>
              <li>• 权限检查优先级：超级管理员 > 具体权限配置</li>
              <li>• 适用于 v-permission 指令、Permission 组件和 checkPermission 函数</li>
            </ul>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useAuthStore } from "@/stores/auth";
import { checkPermission } from "@/directives/permission";
import Permission from "@/components/Permission.vue";
import { Plus, Edit, Delete, Lock, Setting } from "@element-plus/icons-vue";

const authStore = useAuthStore();

// 用户权限列表
const userPermissions = computed(() => authStore.userPermissions);

// 是否为超级管理员
const isSuperAdmin = computed(() => {
  const userInfo = authStore.userInfo;

  // 检查用户信息中是否包含角色信息
  if (userInfo && userInfo.roles) {
    // 如果是数组，检查是否包含 super_admin
    if (Array.isArray(userInfo.roles)) {
      return userInfo.roles.some((role) => role.code === "super_admin");
    }
    // 如果是单个角色对象
    else if (userInfo.roles.code) {
      return userInfo.roles.code === "super_admin";
    }
  }

  // 检查用户信息中的 roleCode 字段
  if (userInfo && userInfo.roleCode) {
    return userInfo.roleCode === "super_admin";
  }

  return false;
});

// 表格数据
const tableData = ref([
  { name: "张三", role: "管理员", status: true },
  { name: "李四", role: "编辑", status: true },
  { name: "王五", role: "查看者", status: false },
]);

// 刷新权限
const refreshPermissions = async () => {
  try {
    await authStore.fetchUserMenus();
    ElMessage.success("权限刷新成功");
  } catch (error) {
    ElMessage.error("权限刷新失败");
  }
};
</script>

<style scoped>
.permission-demo {
  padding: 20px;
}

.demo-section {
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.demo-section h4 {
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e7ed;
}
</style>